<template>
	<view>
		<view class="index">
			<view class="hint" v-if="state>=3">
				<view>假期期间，活动暂停报名！</view>
			</view>
			<!-- 背景图区域 -->
			<view class="bg">
				<image mode="widthFix" src="/static/image/HomeBg.png"></image>
			</view>
			<view class="uid">
				uid:{{uid}}
			</view>
			<!-- 介绍区域 -->
			<view class="content">
				<view class="meet">
					<image src="/static/image/embrace.png"></image>
					<view class="box">
						<view class="title"> 相遇</view>
						<view class="text">根据你的报名信息和喜好为你匹配一位「72小时CP」</view>
					</view>
					<view class="english">
						<view>Meet</view>
						<view>Someone</view>
					</view>
				</view>
				<view class="meet bosom">
					<image src="/static/image/bosom.png"></image>
					<view class="box">
						<view class="title"> 相知</view>
						<view class="text">匹配成功后，将通知两位进行72小时「模拟恋爱」，共同完成一些任务，在这个过程中了解彼此</view>
					</view>
					<view class="english">
						<view>Know</view>
						<view>each other</view>
					</view>
				</view>
				<view class="meet embrace">
					<image src="/static/image/meet.png"></image>
					<view class="box">
						<view class="title"> 相恋</view>
						<view class="text">72小时过后，游戏结束。你们可以选择恋爱关系，也可以选择继续一起走下去</view>
					</view>
					<view class="english">
						<view>Love</view>
					</view>
				</view>
				<view class="record" @click="headleRecord">
					报名记录
				</view>
			</view>
			<!-- 底部报名区域 -->
			<view class="bom">
				<view @click="heanleBtnApply">
					<image src="/static/image/dj.png"></image>
				</view>
			</view>
		</view>

	</view>
</template>
<script>
	export default {
		data() {
			return {
				state: 0,
				uid: 0,
				subTemplateId: ['8Uvon-foP0PyW3TcbllqokQelmiqOnBctl8fTfwZJhY',
					'SKG6uQJdZlvsDS86ql9S78A6YL7Z207Je85-H9tZ8HE', '8Icdi9jQZfy9s1iJ0ke7UXuARS4o1qR0CX84ASDxuvY',
					'0uwnOICQYDtCNFYXXe71yiuIRKMx3xHZrSQjWBBftbk', '4kh2CXv0ZV9vjWkvq6Se3MTKY8AQYwylIqFb2yQfVBw'
				],
			}
		},
		onLoad() {
			uni.showLoading({
				title: "加载中...",
				mask: true
			})
			//获取切割的渠道Id
			let params = this.getRequestParams();
			let salt = params['id'];
			if (salt) {
				uni.setStorageSync("id", parseInt(salt))
			}
		},

		onShow() {
			this.getAuth()
		},

		methods: {
			// 点击报名 
			heanleBtnApply() {
				switch (this.state) {
					// case 0:
					// 	uni.navigateTo({
					// 		url: '/pages/succeed/succeed'
					// 	})
					// 	break;
					case 1:
						uni.navigateTo({
							url: '/pages/apply/apply?status=4'
						})
						break;
					case 2:
						uni.navigateTo({
							url: '/pages/apply/apply'
						})
						break;
					case 3:
						uni.showToast({
							title: "假期期间，暂停报名！",
							icon: "none"
						})
						break;
					default:
						uni.navigateTo({
							url: '/pages/succeed/succeed'
						})
				}
				// if (this.state === 0) {
				// 	uni.navigateTo({
				// 		url: '/pages/succeed/succeed'
				// 	})
				// } else if (this.state === 1) {
				// 	uni.navigateTo({
				// 		url: '/pages/apply/apply?status=4'
				// 	})
				// } else if (this.state === 2) {
				// 	uni.navigateTo({
				// 		url: '/pages/apply/apply'
				// 	})
				// }

			},
			// 用户授权
			getAuth() {
				let id = uni.getStorageSync('id')
				let params = this.getRequestParams();
				let code = params['code'];
				let that = this
				if (code) {
					that.$myRequesyToken({
						url: 'Login',
						method: "POST",
						data: {
							code,
							from_state: id
						}
					}).then(res => {
						if (res.code === 0) {
							uni.setStorageSync("token", res.data.token)
							that.$myRequesy({
								url: 'regis/status',
							}).then(res => {
								if (res.code === 2001 || res.code === 2002 || res.code === 2003) {
									window.location.href =
										'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxc8b3f0e7db85fee2&redirect_uri=https%3A%2F%2Fxiangqin.needyoutd.com%2Fcph5%2F&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect'
								} else if (res.code === 0) {
									this.state = res.data.state
									uni.hideLoading()
									this.uid = res.data.uid
								}
								window.location.href = 'https://xiangqin.needyoutd.com/cph5/index.html'
							})
						}
					})
				} else {
					that.$myRequesy({
						url: 'regis/status',
					}).then(res => {
						if (res.code === 2001 || res.code === 2002 || res.code === 2003) {
							window.location.href =
								'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxc8b3f0e7db85fee2&redirect_uri=https%3A%2F%2Fxiangqin.needyoutd.com%2Fcph5%2F&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect'
						} else if (res.code === 0) {
							this.state = res.data.state
							uni.hideLoading()
							this.uid = res.data.uid
						}
					})
				}

			},
			//切割url路径  code 渠道参数
			getRequestParams() {
				let url = location.href;
				let requestParams = {};
				if (url.indexOf('?') !== -1) {
					let str = url.substr(url.indexOf('?') + 1); //截取?后面的内容作为字符串
					let strs = str.split('&'); //将字符串内容以&分隔为一个数组
					for (let i = 0; i < strs.length; i++) {
						requestParams[strs[i].split('=')[0]] = decodeURI(strs[i].split('=')[1]);
						// 将数组元素中'='左边的内容作为对象的属性名，'='右边的内容作为对象对应属性的属性值
					}
				}
				return requestParams;
			},

			headleRecord() {
				uni.navigateTo({
					url: '../record/record'
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.index {
		background-color: #F7DAFF;

		.hint {
			position: fixed;
			top: 0;
			width: 100%;
			height: 60upx;
			background-color: rgba(255, 255, 255, 0.1);
			padding: 10upx 0upx;
			color: #e6a23c;
			z-index: 999;

			view {
				position: relative;
				animation-name: example;
				animation-duration: 14s;
				animation-iteration-count: infinite;
			}

		}

		@keyframes example {
			from {
				left: 0;
			}

			to {
				left: 100%;
			}
		}


		.bg image {
			width: 750upx;
			height: 1160upx;
		}

		.uid {
			position: absolute;
			top: 1px;
			right: 2px;
			color: rgba(192, 220, 254, 0.5);
			font-size: 20upx;
		}

		.content {
			padding: 0 40upx 250upx;
			background-color: #F7DAFF;
			margin-top: -400upx;

			.meet {
				width: 670upx;
				height: 272upx;
				border-radius: 30upx;
				background-color: #fff;
				position: relative;
				padding: 61upx 40upx 30upx;
				box-sizing: border-box;

				image {
					position: absolute;
					top: -60upx;
					left: 0upx;
					width: 350upx;
					height: 176upx;
				}

				.box {
					text-align: right;
					position: absolute;
					right: 40upx;

					.title {
						margin-bottom: 20upx;
						font-size: 40upx;
					}

					.text {
						width: 390upx;
						color: rgba(0, 0, 0, 0.5);
						font-size: 26upx;
					}
				}

				.english {
					position: absolute;
					bottom: 30upx;
					left: 40upx;
					color: rgba(250, 149, 249, 60);
					font-size: 24upx;
					font-family: PingFangSC-regular;
					font-style: italic;
				}
			}

			.meet:nth-child(2) {
				margin: 100upx 0upx;
			}

			.bosom {
				image {
					right: 0upx;
					left: auto;
				}

				.box {
					left: 40upx;
					text-align: left;
				}

				.english {
					color: rgba(255, 187, 123, 50);
					right: 40upx;
					left: auto;
				}
			}

			.embrace {
				.english {
					color: rgba(255, 115, 127, 50);
				}
			}

			.record {
				text-align: center;
				color: rgba(0, 0, 0, 0.5);
				font-size: 28upx;
				margin-top: 40upx;
			}

		}

		.bom {
			position: fixed;
			bottom: 0;
			right: 0;
			left: 0;
			width: 100%;
			height: 132upx;
			border-radius: 30upx 30upx 0px 0px;
			background-color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			z-index: 99;

			view {
				width: 690upx;
				height: 92upx;
				border-radius: 50upx;
				background-color: rgba(130, 113, 239, 100);
				color: rgba(255, 255, 255, 100);
				box-shadow: 0px 0px 4upx 0px rgba(247, 218, 254, 100);
				border: 2upx solid rgba(0, 0, 0, 0.05);
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 160upx;
					height: 60upx;
				}
			}
		}

	}
</style>
